<template>
    <div class="submitContent">
        <van-nav-bar title="结算" left-text="返回" left-arrow @click-left="handleBack" />

        <div class="address" @click="handleAddAddress">
            <div class="text">{{ addressInfo.address == '' ? '请选择地址' : addressInfo.address }}</div>
            <div class="detail">
                <span class="name">
                    {{ addressInfo.name }}
                </span>
                <span class="phone">
                    {{ addressInfo.tel }}
                </span>
            </div>
            <div class="icon">
                <van-icon name="arrow" />
            </div>
        </div>
        <div class="myOrder">
            <div class="content">
                <div class="title">
                    <div class="name">{{ shopInfo.name }}</div>
                    <div class="name">外卖配送</div>
                </div>
                <div class="foodList">
                    <div class="foodItem" v-for="(item, index) in foodList" :key="index">
                        <div class="left">
                            <img :src="assetsUrl + item.imageUrl" alt="">
                            <!-- <img src="@/assets/img/dingcan/foodImg.png" alt=""> -->
                        </div>
                        <div class="middle">
                            <div class="name">{{ item.name }}</div>
                            <div class="taste">{{ item.taste[item.tasteIndex] }}</div>
                            <div class="price">￥{{ item.price }}</div>
                        </div>
                        <div class="right">
                            <div class="jian" @click="handleChange('0', item)">-</div>
                            <div class="val">{{ item.num }}</div>
                            <div class="jia" @click="handleChange('1', item)">+</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="orderDetail">
            <div class="contentItem">
                <div class="text">包装费</div>
                <div class="val">实付￥{{ baozhuang }}</div>
            </div>
            <div class="contentItem">
                <div class="text">配送费</div>
                <div class="val">免配送费</div>
            </div>
            <div class="contentItem">
                <div class="text">慢必配</div>
                <div class="val">赠送</div>
            </div>
            <div class="contentItem">
                <div class="text">支付方式</div>
                <div class="val">微信支付</div>
            </div>
            <div class="priceInfo">
                <div class="priceText">价格：</div>
                <div class="priceVal">实付￥
                    <span>{{ priceTotal }}</span>
                </div>
            </div>
        </div>
        <div class="submit" @click="handleSubmit">提交订单</div>
        <van-popup v-model="show" position="bottom" :style="{ height: '60%' }">
            <van-address-list v-model="chosenAddressId" :list="list" default-tag-text="默认"
                @click-item="handleClickAddress" 
                @add="onAdd" @edit="onEdit" 
                
                />
                
            <van-dialog v-model="showChangeDialog" title="标题">
                <van-address-edit :area-list="areaList" :address-info="addressInfo" show-postal show-delete
                    show-set-default show-search-result :search-result="searchResult"
                    :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" @delete="onDelete"
                    @change-detail="onChangeDetail" />
            </van-dialog>
        </van-popup>
    </div>
</template>

<script>
import { areaList } from '@vant/area-data';
import { getAddressList, submitOrder } from "@/api/reception"
import { changeAddress, delAddress } from "@/api/reception"

import { Toast } from "vant";

export default {

    data() {
        return {
            assetsUrl: '',
            areaList,
            showChangeDialog: false,
            searchResult: [

            ],
            addressInfo: {
               id:'',
               address:''
            },
            chosenAddressId: '1',
            list: [

            ],
            disabledList: [
                // {
                //     id: '3',
                //     name: '王五',
                //     tel: '1320000000',
                //     address: '浙江省杭州市滨江区江南大道 15 号',
                // },
            ],
            show: false,
            baozhuang: '1.5',
            priceTotal: 0,
            foodList: [
            ],
            shopInfo: {},
            list: []
        };
    },
    created() {
        this.assetsUrl = process.env.VUE_APP_ASSETSURL

        this.getAddressList()
        console.log(this.$route.query);
        this.shopInfo = this.$route.query.shopInfo

        this.foodList = this.$route.query.chooseList.map(item => {
            return {
                ...item,
                num: 1
            }
        })
        console.log(this.shopInfo, 'a', this.foodList);

        this.baozhuang = '1.5'
        this.foodList.forEach(item => {
            this.priceTotal += Number(item.price) * 1 * Number(item.num) * 1;
        })
        this.priceTotal = this.priceTotal + this.baozhuang * 1;
        console.log(this.priceTotal);

    },
    mounted() {
        this.getAddressList()

    },

    methods: {
        onAdd() {
            this.showChangeDialog = true;
            this.addressInfo = {}
        },
        onEdit(v) {
            this.showChangeDialog = true;
            this.addressInfo = v
        },
        onChangeDetail(val) {

        },
        async getAddressList() {
            const res = await getAddressList()
            console.log(res, 'rr');
            this.list = res.data.map(item => {
                return {
                    ...item,
                    isDefault: item.isDefault == '0' ? true : false
                }
            })
        },
        async onSave(v) {
            v.address = v.province + v.city + v.county + v.addressDetail;
            v.isDefault = v.isDefault ? '0' : '1';
            console.log(v);

            const res = await changeAddress(v);
            if (res.code == 200) {
                this.showChangeDialog = false;
                this.getAddressList()
                if (v.id) {
                    Toast('修改成功！');

                } else {
                    Toast('新增成功！');
                }
            }
        },
        async onDelete(v) {
            let data = {
                id: v.id
            }
            const res = await delAddress(data)
            if (res.code == 200) {
                this.showChangeDialog = false;
                this.getAddressList()
                Toast('删除成功！');
            }
        },
        async getAddressList() {
            const res = await getAddressList()
            this.list = res.data

        },
        handleBack() {
            this.$router.back()

        },
        async handleSubmit() {
            console.log(this.addressInfo);
            console.log(this.foodList, 'a');

            if (!this.addressInfo.address) {
                // Toast('请选择地址');
                return
            }
            let arr = this.foodList.map(item => {
                return {
                    dishesId: item.id,
                    count: item.num
                }
            })
            let data = {
                address: this.addressInfo.address,
                uName: this.addressInfo.name,
                uPhone: this.addressInfo.tel,
                orderDishesList: arr,
                packPrice: 1.5,
                payMethod: '微信支付',
                actualPayment: this.priceTotal,
                businessId: this.shopInfo.id
            }
            console.log(data, 'data');
            const res = await submitOrder(data)
            console.log(res, 'rr');
            if (res.code == 200) {
                Toast('下单成功！');
                this.$router.push('/orderHome/receptionHome')
            }

        },
        handleClickAddress(item) {
            console.log(item);
            this.addressInfo = item
            // this.show = false

        },
        handleAddAddress() {
            this.show = true
        },
        handleChange(flag, item) {
            console.log(item, flag);

            if (flag == '0') {
                item.num--

            } else {
                item.num++
            }
            this.priceTotal = 0
            this.foodList.forEach(item => {
                this.priceTotal += item.price * item.num;
            })
        }
    },
};
</script>

<style lang="less" scoped>
.submitContent {
    padding: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;

    .address {
        padding: 10px;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        margin-bottom: 10px;
    }

    .content {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        padding: 10px;

        .title {
            font-weight: 700;
            font-size: 16px;
        }

        .foodList {
            height: 400px;
            overflow-y: auto;

            .foodItem {
                display: flex;
                margin-bottom: 15px;

                .left {
                    margin-right: 10px;

                    img {
                        width: 80px;
                    }
                }

                .middle {
                    flex: 1;

                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .name {
                        font-size: 18px;
                        font-weight: 600;
                    }

                    .price {
                        font-size: 20px;
                        color: #ff3e14;
                    }
                }

                .right {
                    display: flex;
                    align-items: center;
                    width: 30%;
                    justify-content: flex-end;
                    padding-right: 15px;

                    .jian,
                    .jia {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 20px;
                        height: 20px;
                        border: 1px solid #eee;
                        border-radius: 3px;
                        color: red;
                    }

                    .val {
                        margin: 0px 5px;
                    }
                }
            }
        }
    }

    .orderDetail {
        flex: 1;
        padding: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        display: flex;
        flex-direction: column;

        .contentItem {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 30px;


            .text {
                color: #333;
                font-size: 12px;
            }

            .val {
                font-size: 16px;
                color: #333;
            }


        }

        .priceInfo {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #eee;
            padding-top: 10px;
            margin-top: 15px;

            .priceText {
                font-size: 18px;
                font-weight: 700;
            }

            .priceVal {
                font-size: 22px;

                span {
                    color: #ff3e14;

                }
            }
        }
    }

    .submit {
        border-radius: 25px;
        height: 50px;
        background: linear-gradient(to right, #FF4932, #FF7455);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }
}
</style>